<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { copyObjectSameTo, dateFormatStr, popMessage, travelTree } from '../../../../common/utils/normalUtils'
import { sendServiceData } from '../../../../common/service'
import { countOrderApi } from '../../../../common/service/api/orderApi'
import { queryJxsApi } from '../../../../common/service/api/dealerApi'

const emit = defineEmits(['result'])
const props = defineProps({
    userId: {
        type: [String, Number],
        default: ''
    }
})

/**
 * 页面状态
 */
const state = reactive({
    isLoading: false,
    jxsList: [],
    result: null,
    treeSource: [],
    formData: {
        id: '',
        date: []
    },
    rules: {
        id: [{ required: true, message: '不能为空', trigger: 'blur' }],
        date: [{ required: true, message: '不能为空', trigger: 'blur' }]
    }
})

const treeOptions = ref({
    label: 'name'
})


const isCount = computed(() => {
    return Boolean(state.formData.date && state.formData.date.length === 2 && state.formData.id)
})

const queryJxs = async () => {
    const result = await sendServiceData(queryJxsApi, {}, state)
    state.treeSource = result
}


/**
 * 计算金额
 */
const countMoney = async () => {
    let name = ''
    travelTree(state.treeSource, (tiem:any) => {
        if (tiem.id === state.formData.id) {
            name = tiem.name
            return -1
        }
    })
    const send = {
        name,
        orderPayTimeStart: dateFormatStr(state.formData.date[0]),
        orderPayTimeEnd: dateFormatStr(state.formData.date[1])
    }
    const result = await sendServiceData(countOrderApi, send, state)
    emit('result', result)
}

onMounted(() => {
    if (props.userId)state.formData.id = props.userId
    queryJxs()
})

</script>

<template>
  <v-pop-win title="计算金额"
             :width="500"
             align-center
             :show-footer="false"
             no-padding
             :loading="state.isLoading">
    <el-form :style="{width:'100%'}"
             :model="state.formData"
             :rules="state.rules"
             :label-width="100"
             class="form-edit-box"
             status-icon>
      <el-form-item label="分销商" prop="type">
        <el-tree-select v-model="state.formData.id"
                        :data="state.treeSource"
                        check-strictly
                        node-key="id"
                        clearable
                        placeholder="请选择分销商"
                        :props="treeOptions"
                        :render-after-expand="false"
                        style="width:100%;" />
      </el-form-item>
      <el-form-item label="时间范围" prop="name">
        <el-date-picker v-model="state.formData.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="选择开始时间"
                        end-placeholder="选择结束时间" />
      </el-form-item>
      <div class="form-item2">
        <v-button type="success"
                  icon="jine1"
                  :disabled="!isCount"
                  @click="countMoney">
          计算金额
        </v-button>
      </div>
    </el-form>
  </v-pop-win>
</template>


<style scoped lang="scss">


.form-item1{
  @include hor-group(center);
  flex:none;
  width:100%;
  margin-bottom: 30px;
  position:relative;
}
.form-item2{
  @include hor-group(center);
  flex:none;
  width:100%;
  margin-bottom: 10px;
}

</style>
